/*
 * Copyright (c) 2024 YuJie Ge(Smile)
 * Licensed under the MIT License.
 */
import { useState } from "react";
import { Layout } from "@arco-design/web-react";
import ToggleSider from "./ToggleSider";
import ToggleLanguage from "./ToggleLanguage";
import ToggleDarkMode from "./ToggleDarkMode";
import ToggleFullscreen from "./ToggleFullscreen";
import Github from "./Github";
import ToggleTheme from "./ToggleTheme";
import UserInfo from "./UserInfo";
import logo from "../../assets/image/logo2.png";
import {
  useAccount,
  useNetwork,
  useConnect,
  useDisconnect,
  useSwitchNetwork,
} from "wagmi";
import { Button, Modal, Icon } from "@arco-design/web-react";

interface Network {
  id: number;
  name: string;
  icon?: string;
}

const Header = Layout.Header;
function AppHeader() {
  const { chain, chains } = useNetwork(); // 获取当前连接的链
  const { switchNetwork } = useSwitchNetwork(); // 用于切换网络
  const [isNetworkSwitchHighlighted, setIsNetworkSwitchHighlighted] =
    useState<boolean>(false);
  const [isConnectHighlighted, setIsConnectHighlighted] =
    useState<boolean>(false);
  const [networkModalVisible, setNetworkModalVisible] =
    useState<boolean>(false);
  const closeAll = () => {
    setIsNetworkSwitchHighlighted(false);
    setIsConnectHighlighted(false);
  };

  // 切换网络
  const handleSwitchNetwork = (networkId: number) => {
    switchNetwork?.(networkId);
    setNetworkModalVisible(false);
  };

  return (
    <Header
      className="flex items-center justify-between h-16 border-b border-solid"
      style={{
        backgroundColor: "var(--color-bg-3)",
        borderColor: "var(--color-border)",
      }}
    >
      {/* <ToggleSider></ToggleSider> */}
      <img src={logo} alt="" style={{ width: "130px" }} />

      <div className="flex items-center">
        {/* <Button onClick={() => setNetworkModalVisible(true)}>
          Switch Network <Icon name="swap" />
        </Button> */}
        <div
          onClick={closeAll}
          style={{
            //backgroundColor: "#4CAF50",
            //color: "white",
            // height: "30px",
            // lineHeight: "30px",
            // padding: "10px 20px",
            // borderRadius: "5px",
            // border: "solid 1px #ddd",
            marginRight: "10px",
          }}
        >
          <w3m-network-button
            style={{
              borderRadius: "20px",
              border: "solid 1px #ddd",
            }}
          />
        </div>
        <div onClick={closeAll}>
          <w3m-button
            style={{
              borderRadius: "20px",
              border: "solid 1px #ddd",
            }}
          />
        </div>
        <ToggleLanguage></ToggleLanguage>
        <ToggleDarkMode></ToggleDarkMode>
        {/* <ToggleFullscreen></ToggleFullscreen>
        <Github></Github>
        <ToggleTheme></ToggleTheme>
        <UserInfo></UserInfo> */}
      </div>
      <Modal
        visible={networkModalVisible}
        onClose={() => setNetworkModalVisible(false)}
        title="Select Network"
      >
        <div style={{ display: "flex", flexDirection: "column" }}>
          {chains.map((c) => (
            <>
              <span>{c}</span>
              <Button
                key={c.id}
                onClick={() => handleSwitchNetwork(c.id)}
                style={{
                  display: "flex",
                  alignItems: "center",
                  marginBottom: "10px",
                  justifyContent: "space-between",
                }}
              >
                <div style={{ display: "flex", alignItems: "center" }}>
                  <Icon
                    name={c.icon || "network"}
                    style={{ marginRight: "10px" }}
                  />
                  <span>{c.name}</span>
                </div>
                {chain?.id === c.id && <span>Connected</span>}
              </Button>
            </>
          ))}
        </div>
      </Modal>
    </Header>
  );
}

export default AppHeader;
